<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水果详情</title>
</head>
<style>
    body {
        width: 100%;
        height: 1000px;
        background-color: rgba(255,255,0,0.01);
    }
</style>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<body>
<a style="text-decoration: none;padding-bottom: 1%" href="index.html" >返回</a>
<div id="app" style="padding-top: 1%">
    <div id="d1" style="float: left;width: 400px;height: 400px" >
        <img :src="fruit.url" alt="" style="width: 400px;height: 400px">
    </div>
    <div id="d2" style="font-size: 24px;padding-left:40px;margin-top: -70px;display: inline-block">
        <span><h4>种类:{{fruit.kind}}</h4></span>
        <span>库存:{{fruit.count}}</span>
        <br>
        <br>
        <span>销量:{{fruit.saleCount}}</span>
        <p>介绍:{{fruit.detail}}</p>
        <span>品牌:{{fruit.brand}}</span>
        <br>
        <br>
        <span>产地:{{fruit.origin}}</span>
        <p>单价:{{fruit.price}}</p>
        <el-button @click="addOrder" type="success" icon="el-icon-share">购买</el-button>
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
            <el-form ref="form" :model="user" label-width="80px">
                <el-form-item label="收货人">
                    <el-input v-model="user.username" disabled></el-input>
                </el-form-item>
                <el-form-item label="手机号码">
                    <el-input v-model="user.phone" disabled></el-input>
                </el-form-item>
                <el-form-item label="购买数量">
                    <template>
                        <el-input-number v-model="num" @change="handleChange" :min="1" :max="10"
                                         label="文字描述"></el-input-number>
                    </template>
                </el-form-item>

                <el-form-item label="收货地址">
                    <el-input v-model="user.address"></el-input>
                </el-form-item>
                <el-form-item label="订单编号">
                    <el-input v-model="orderId" disabled></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                  <span style="color: #99a9bf;font-size: 10px">共{{num}}件</span>
                  <span style="color: #303133;font-size: 15px;font-weight: 700">合计:￥{{fruit.oldPrice}}</span>
                  <el-button type="primary" @click="insertOrder(v.num)">生成订单</el-button>
                  <el-button @click="dialogVisible = false">取 消</el-button>
  </span>
        </el-dialog>
    </div>

    <div id="d3" style="width: 100%;height: 40%;overflow: auto">
        <p>相关推荐:</p>
        <div v-for="fruit in fruits" style="padding: 1%;display: inline-block">
            <img v-for="url in fruit.urlArr" :src="url" :alt="fruit.detail" style="width: 150px;height: 100px">
            <p style="width: 150px;">{{fruit.detail}}<p>
            <span><a style="text-decoration: none" href="javascript:void (0)" @click="location.href='details.html?id='+fruit.id">去看看</a></span>
        </div>
    </div>
</div>
</body>
<script src="js/axios.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/eui.js"></script>
<script>
    let v = new Vue({
        el: "#app",
        data: function () {
            return {
                fruit: {},
                dialogVisible: false,
                form: [],
                user: {},
                fruits:[],
                orderId: "",
                num: "",
                price: 0,
            }
        },
        created: function () {
            let id = location.search.split("=")[1];
            axios.get("/fruit/selectById?id=" + id).then(function (response) {
                v.fruit = response.data;
            })
            axios.get("/fruit/selectfruits?id="+id).then(function (response){
                v.fruits = response.data;
                for (let fruit of v.fruits) {
                    fruit.urlArr = fruit.url == "" ? [] : fruit.url.split(",")
                }
            })
        },
        methods: {
            insertOrder(num) {
                v.dialogVisible = false;
                axios.post("/order/insert", this.form).then(function () {

                })
            },
            addOrder() {
                v.dialogVisible = true;
                axios.get("/order/addOrder").then(function (response) {
                    v.form = response.data;
                    console.log(v.form);
                    for (let i = 0; i < v.form.length; i++) {
                        v.user = v.form[0];
                        v.orderId = v.form[1];
                        console.log(v.user);
                    }
                })
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            handleChange(value) {
                v.fruit.oldPrice = v.fruit.oldPrice;
                v.fruit.oldPrice = value * v.fruit.oldPrice;

            },
        }
    })
</script>
</html>